<template>
    <div class="main-box">
        <div class="char-box">
            <div class="char-l">

            </div>
            <div class="char-c">
                <div class="char-c-header">
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">今天去了？</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-r-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-r">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">德志应该还在家</p>
                        </div>
                    </div>
                    <div class="char-c-r-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-r">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">德志应该还在家</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-r-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-r">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">德志应该还在家</p>
                        </div>
                    </div>
                    <div class="char-c-r-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-r">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">德志应该还在家</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-l-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-t">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">昨天和朱儿刚去</p>
                        </div>
                    </div>
                    <div class="char-c-r-message">
                        <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                        <div class="message-r">
                            <p class="time">2023-07-18 13:40:22</p>
                            <p class="content">德志应该还在家</p>
                        </div>
                    </div>
                </div>
                <div class="char-c-body">
                    <div class="char-body-tool">

                    </div>
                    <div class="char-body-content">
                        <textarea maxlength="255"></textarea>
                        <el-button type="success" class="send-btn" size="mini">发送</el-button>
                    </div>
                </div>
            </div>
            <div class="char-r">
                <div class="char-r-list">
                    <div class="char-list-header">
                        <p>管理员</p>
                    </div>
                    <div class="char-list-body">
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">朱儿</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">德志</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">苗兰</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">朱儿</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">德志</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">苗兰</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">朱儿</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">德志</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">苗兰</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">朱儿</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">德志</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">苗兰</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">朱儿</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">德志</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">苗兰</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">朱儿</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">德志</p>
                        </div>
                        <div class="char-list-item">
                            <div class="is-line"></div>
                            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
                            <p class="username">苗兰</p>
                        </div>
                    </div>
                </div>
                <div class="char-r-notice">
                    <div class="char-notice-header">
                        <p class="title">系统通知：</p>
                    </div>
                    <div class="char-notice-body">
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:01:22</p>
                            <p class="username">朱儿上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:24:34</p>
                            <p class="username">德直上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:01:22</p>
                            <p class="username">朱儿上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:24:34</p>
                            <p class="username">德直上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:01:22</p>
                            <p class="username">朱儿上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:24:34</p>
                            <p class="username">德直上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:01:22</p>
                            <p class="username">朱儿上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:24:34</p>
                            <p class="username">德直上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:01:22</p>
                            <p class="username">朱儿上线了</p>
                        </div>
                        <div class="char-notice-item">
                            <p class="time">2023-07-18 16:24:34</p>
                            <p class="username">德直上线了</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "chat",
    data() {
        return {
            size: 'small',
            squareUrl: ''
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>
  
<style lang="less" scoped>
.main-box {
    .char-box {
        width: 1000px;
        height: 700px;
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6), -10px -10px 10px rgba(255, 255, 255, 1);
        border-radius: 15px;
        overflow: hidden;

        .char-l {
            width: 260px;
            height: 100%;
            background-color: #282C34;
        }

        .char-c {
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            padding-top: 15px;
            box-sizing: border-box;

            .char-c-header {
                height: 75%;
                padding: 15px;
                overflow: auto;
                overflow-y: hidden;
                box-sizing: border-box;

                &:hover {
                    overflow-y: scroll; //x轴出现滚动条
                    overflow-y: overlay; //y轴滚动条，不会挤压页面宽度
                }

                .char-c-l-message {
                    display: flex;
                    flex-direction: row;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    background-color: #E9EEF3;
                    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(255, 255, 255, 1);
                    border-radius: 5px;
                    margin-bottom: 15px;
                    .message-t {
                        display: flex;
                        flex-direction: column;
                        padding: 2px 8px;
                        box-sizing: border-box;

                        p.time {
                            font-size: 12px;
                            color: #515A6E;
                        }

                        p.content {
                            font-size: 13px;
                            line-height: 24px;
                            text-align: left;
                        }
                    }
                }

                .char-c-r-message {
                    display: flex;
                    flex-direction: row-reverse;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    background-color: #E9EEF3;
                    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(255, 255, 255, 1);
                    border-radius: 5px;
                    margin-bottom: 15px;

                    .message-r {
                        display: flex;
                        flex-direction: column;
                        padding: 2px 8px;
                        box-sizing: border-box;

                        p.time {
                            font-size: 12px;
                            color: #515A6E;
                        }

                        p.content {
                            font-size: 13px;
                            line-height: 24px;
                            text-align: right;
                        }
                    }
                }
            }

            .char-c-body {
                height: 25%;
                display: flex;
                flex-direction: column;

                .char-body-tool {
                    height: 45px;
                    background-color: #282C34;
                }

                .char-body-content {
                    height: 100%;
                    background-color: #E9EEF3;
                    position: relative;
                    padding: 3px;
                    box-sizing: border-box;

                    .el-button {
                        position: absolute;
                        right: 5px;
                        bottom: 5px;
                    }

                    textarea {
                        width: 100%;
                        height: 100%;
                        resize: none;
                        border: none;
                        outline: none;
                        box-sizing: border-box;
                        font-size: 13px;
                        line-height: 22px;
                        text-indent: 2em;
                        color: #515A6E;
                    }
                }
            }
        }

        .char-r {
            width: 300px;
            height: 100%;
            background-color: #FFFFFF;
            border-left: 1px solid #F3F3F3;
            padding: 15px 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            .char-r-list {
                height: 60%;
                display: flex;
                flex-direction: column;

                .char-list-header {
                    padding: 5px 10px;
                    border-bottom: 1px solid #F3F3F3;

                    p {
                        font-size: 14px;
                        font-weight: 700;
                    }
                }

                .char-list-body {
                    padding: 10px 0;
                    box-sizing: border-box;
                    overflow: auto;
                    overflow-y: hidden;
                    box-sizing: border-box;

                    &:hover {
                        overflow-y: scroll; //x轴出现滚动条
                        overflow-y: overlay; //y轴滚动条，不会挤压页面宽度
                    }

                    .char-list-item {
                        display: flex;
                        justify-content: start;
                        align-items: center;
                        padding: 3px 0;

                        p.username {
                            font-size: 14px;
                            padding-left: 5px;
                            overflow: hidden; //超出的文本隐藏
                            text-overflow: ellipsis; //溢出用省略号显示
                            white-space: nowrap; // 默认不换行；
                        }

                        .is-line {
                            width: 6px;
                            height: 6px;
                            background-color: #00CF80;
                            border-radius: 50%;
                            position: relative;
                            top: 8px;
                            left: 26px;
                            border: 1px solid #ffffff;
                        }
                    }
                }
            }

            .char-r-notice {
                height: 40%;
                display: flex;
                flex-direction: column;

                .char-notice-header {
                    padding: 5px 10px;
                    border-bottom: 1px solid #F3F3F3;

                    p {
                        font-size: 14px;
                        font-weight: 700;
                    }
                }

                .char-notice-body {
                    padding: 10px 0;
                    overflow: auto;
                    overflow-y: hidden;
                    box-sizing: border-box;

                    &:hover {
                        overflow-y: scroll; //x轴出现滚动条
                        overflow-y: overlay; //y轴滚动条，不会挤压页面宽度
                    }

                    .char-notice-item {
                        display: flex;
                        flex-direction: column;
                        justify-content: start;
                        padding: 3px 0;

                        p.username {
                            font-size: 14px;
                            padding-left: 5px;
                            line-height: 24px;
                            overflow: hidden; //超出的文本隐藏
                            text-overflow: ellipsis; //溢出用省略号显示
                            white-space: nowrap; // 默认不换行；
                            text-indent: 1em;
                        }

                        p.time {
                            font-size: 12px;
                            color: #515A6E;
                        }
                    }
                }
            }
        }
    }
    /*滚动条高宽度*/
    .char-c-header::-webkit-scrollbar,.char-list-body::-webkit-scrollbar,.char-notice-body::-webkit-scrollbar {
        width: 8px;
        height: 4px;
    }
    /*滚动条滑块*/
    .char-c-header::-webkit-scrollbar-thumb,.char-list-body::-webkit-scrollbar-thumb,.char-notice-body::-webkit-scrollbar-thumb {
        border-radius: 3px;
        // box-shadow: inset 2 2 5px rgba(40, 44, 52, 0.2);
        background: #282C34;
    }
    /*滚动条的小边角*/
    .char-c-header::-webkit-scrollbar-corner,.char-list-body::-webkit-scrollbar-corner,.char-notice-body::-webkit-scrollbar-corner {
        background: transparent;
    }
}</style>